<template>
    <div style="display: flex;">
<div class="lft">
<div>
    <el-card
          v-for="item in lists"
          :key="item.name"
          :body-style="{ padding: '0px', marginBottom: '1px' }"
        >
          <img :src="item.imgUrl" class="image multi-content" style="border: 1px solid red;" />
          <div style="padding: 14px">
            <span>{{ item.name }}</span>
            <div class="bottom card-header">
              <div class="time">{{ currentDate }}</div>
              <el-button text class="button">Operation button</el-button>
            </div>
          </div>
        </el-card>
</div>
</div>
<div class="rht">

</div>

</div>
</template>

<script setup lang="ts">
import { watchEffect, reactive, ref } from 'vue';
import{infomationcenterdayline,infomationcenterdepartmentline } from '@/api/home.api'
interface ListItem {
  imgUrl: string
  name: string
}
const lists = ref<ListItem[]>([])
const currentDate = new Date().toDateString()
const homelist= async()=>{
const res=await infomationcenterdayline()
console.log(res);

}
const homelist2= async()=>{
const res=await infomationcenterdepartmentline()
console.log(res);

}

watchEffect(homelist)
</script>


<style scoped>
.lft{
    width: 70%;
    height: 800px;
    border:1px solid red;
}
.rht{
    width: 30%;
    height: 800px;
    border: 1px solid #f60;
}
</style>